/**
 * DOM 工具函数
 * 提供安全的 DOM 元素访问方法
 */

/**
 * 安全地获取 DOM 元素
 * @param id 元素 ID
 * @returns DOM 元素或 null
 */
export function safeGetElementById(id: string): HTMLElement | null {
  if (!id || id.trim() === '') {
    console.warn('safeGetElementById: 传入的 ID 为空字符串')
    return null
  }
  
  try {
    return document.getElementById(id)
  } catch (error) {
    console.error('safeGetElementById: 获取元素时发生错误', error)
    return null
  }
}

/**
 * 安全地获取 DOM 元素（支持选择器）
 * @param selector CSS 选择器
 * @returns DOM 元素或 null
 */
export function safeQuerySelector(selector: string): Element | null {
  if (!selector || selector.trim() === '') {
    console.warn('safeQuerySelector: 传入的选择器为空字符串')
    return null
  }
  
  try {
    return document.querySelector(selector)
  } catch (error) {
    console.error('safeQuerySelector: 获取元素时发生错误', error)
    return null
  }
}

/**
 * 安全地获取多个 DOM 元素
 * @param selector CSS 选择器
 * @returns DOM 元素列表
 */
export function safeQuerySelectorAll(selector: string): NodeListOf<Element> | null {
  if (!selector || selector.trim() === '') {
    console.warn('safeQuerySelectorAll: 传入的选择器为空字符串')
    return null
  }
  
  try {
    return document.querySelectorAll(selector)
  } catch (error) {
    console.error('safeQuerySelectorAll: 获取元素时发生错误', error)
    return null
  }
}

/**
 * 初始化 DOM 安全补丁
 * 重写原生 DOM 方法以防止空字符串参数
 */
export function initDomSafetyPatches(): void {
  // 重写 getElementById
  const originalGetElementById = document.getElementById
  document.getElementById = function(id: string) {
    if (!id || id.trim() === '') {
      console.warn('getElementById() 被传递了空字符串参数，已忽略')
      return null
    }
    return originalGetElementById.call(this, id)
  }

  // 重写 querySelector
  const originalQuerySelector = document.querySelector
  document.querySelector = function(selectors: string) {
    if (!selectors || selectors.trim() === '') {
      console.warn('querySelector() 被传递了空字符串参数，已忽略')
      return null
    }
    return originalQuerySelector.call(this, selectors)
  }

  // 重写 querySelectorAll
  const originalQuerySelectorAll = document.querySelectorAll
  document.querySelectorAll = function(selectors: string) {
    if (!selectors || selectors.trim() === '') {
      console.warn('querySelectorAll() 被传递了空字符串参数，已忽略')
      return document.querySelectorAll('*') // 返回空 NodeList
    }
    return originalQuerySelectorAll.call(this, selectors)
  }

  // 修复 Element Plus 组件可能的问题
  // 监听 DOM 变化，确保所有元素都有正确的 ID
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.type === 'childList') {
        mutation.addedNodes.forEach((node) => {
          if (node.nodeType === Node.ELEMENT_NODE) {
            const element = node as Element
            // 确保所有 Element Plus 组件都有有效的 ID
            if (element.classList.contains('el-') && !element.id) {
              element.id = `el-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
            }
          }
        })
      }
    })
  })

  // 开始观察 DOM 变化
  observer.observe(document.body, {
    childList: true,
    subtree: true
  })
}
